<template>
	<view class="wanl-page wanlshop-container">
		<view
			:style="{ backgroundSize : '100% auto', backgroundImage : 'url(' + $wanlshop.oss('/uploads/20240110/34d0d8aa5a7493ea90ab352f6405a5bd.jpg', 0, 50, 1, 'transparent', 'png') + ')' }">
			<!-- 导航条 -->
			<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
				<view class="cu-bar fixed" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					color: '#ffffff'
				}">
					<view class="action" @tap="$wanlshop.back(1)">
						<text class="wlIcon-fanhui1"></text>
					</view>
					<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
						陪诊陪护
					</view>
				</view>
			</view>

			<view class="wanlshop-container__head">
				<view class="navigater flex align-center justify-between address" style="padding-right: 25rpx;">
					<view class="flex">
						<view class="text-lg flex" @tap="$wanlshop.to('/pages/page/city')">
							<!-- <text class="wlIcon-sheng"></text> -->
							<text>{{common.addressText}}</text>
							<text style="margin-top: 16rpx;font-size: 26rpx;"
								class="wlIcon-jiang text-df margin-top"></text>
						</view>
					</view>
					<view class="search flex justify-between align-center round">
						<view class="left flex justify-start align-center">
							<view class="icon text-df text-bold wanl-gray-dark">
								<text class="wlIcon-sousuo1"></text>
							</view>
							<input type="text" placeholder-style="color: #fff;font-size: 28rpx;"
								placeholder="陪诊陪护" v-model="keyword" />
						</view>
						<view class="btn" @tap="handleSearch">
							搜索
						</view>
					</view>
				</view>
			</view>
		</view>

		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')"
			@refresh="load($event,'refresh')">
			<view class="padding-top-xs" style="background-repeat: repeat-x;"
				:style="{ backgroundSize : '100%', backgroundImage : 'url(' + $wanlshop.oss('/uploads/20240110/34d0d8aa5a7493ea90ab352f6405a5bd.jpg', 0, 50, 1, 'transparent', 'png') + ')',backgroundPosition: `0 -${($wanlshop.wanlsys().height + h) + 'px'}`}">
				<wanl-banner :banner="banner" img="media" link="url" :StyleSheet="{margin:'0 30rpx 25rpx 30rpx'}" />
				<view class="menu" v-if="menu.length > 0">
					<view class="item flex flex-direction align-center justify-center" v-for="(item,index) in menu"
						:key="index"
						@tap="$wanlshop.to(`/pages/medicalcare/accompany/list?id=${item.id}`)">
						<view class="image flex justify-center align-center">
							<image :src="$wanlshop.oss(item.image)" mode="heightFix"></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				
				
				<view class="product">
					<view class="list">
						<view @tap="$wanlshop.to(`/pages/medicalcare/accompany/store?id=${item.id}`)" class="item" v-for="(item,index) in goodsData" :key="item.id">
							<view class="t">
								<view class="l">
									<text class="name text-cut-2">{{item.title}}</text>
									<view class="tag flex justify-start align-center">
										<view class="city">
											<text>全{{common.addressText}}</text>
											<text>可服务</text>
										</view>
										<view class="baozhang flex justify-start align-center">
											<image src="/static/img/baozhang.png" mode="widthFix"></image>
											<text>平台保障</text>
										</view>
									</view>
									<view class="score flex justify-start align-center">
										<uni-rate readonly :allowHalf="true" :max="5" :value="item.comment_score"
											:size="16" color="#CCCCCC" active-color="#f00" />
										<text>{{item.comment_score}}</text>
										<text>{{item.comment_num}}条评论</text>
									</view>
									<view v-if="item.comment_num > 0" class="comment flex justify-start align-center">
										<view class="face" :style="{width:30 * (item.comment_user_avatar.length + 1) + 'rpx',height:item.comment_user_avatar.length > 0 ? '40rpx' : 0}">
											<image :style="{left:30 * k + 'rpx'}" :src="$wanlshop.oss(d)" mode="aspectFill" v-for="(d,k) in item.comment_user_avatar"></image>
										</view>
										<view class="content text-cut-1">{{item.comment_content}}</view>
									</view>
								</view>
								<image v-if="item.logo" :src="$wanlshop.oss(item.logo)" mode="aspectFill"></image>
							</view>
							<view class="b">
								<view class="tags">
									<block v-if="item.tags">
										<text v-for="(d,k) in item.tags.split(',')" :key="k">{{d}}</text>
									</block>
								</view>
								<view class="r flex justify-center align-center" @tap.stop="$wanlshop.phone(item.mobile)">
									<image src="/static/img/phone1.png" mode="widthFix"></image>
									<text>电话咨询</text>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import permision from '@/common/permission';
	export default {
		data() {
			return {
				menu: uni.getStorageSync('wanlshop:accompanymenu'),
				banner: [],
				keyword:'',
				params: {
					page: 1,
					category_id: '',
					keyword: '',
					order_by: '', // 【sale_desc：价格降序；sale_asc：价格升序】
				},
				goodsData: [],
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				h: 0
			};
		},
		computed: {
			...mapState(['common'])
		},
		watch: {
			'common.cityId': {
				handler(newVal, oldVal) {
					if (newVal && oldVal) {
						this.$refs.list.refreshScrollView()
						this.load({
							page: 1
						}, 'refresh')
						this.loadData()
					}
				},
				deep: true,
				immediate: true
			}
		},
		onLoad() {
			this.h = uni.upx2px(86);
			this.loadData()
		},
		methods: {
			// 加载数据
			load(paging, key) {
				// uni.request({
				// 	url: `${this.$config.vehicleurl}/addons/accompany/api.Product/lists`,
				// 	method: 'post',
				// 	data: {
				// 		type: 'recommand',
				// 		city_id: uni.getStorageSync("cityid"),
				// 		page: 1
				// 	},
				// 	success: res => {
				// 		this.dataList = res.data.data;
				// 	}
				// });
				uni.request({
					url: `/addons/accompany/api.shop/lists`,
					data: {
						page: paging.page
					},
					success: res => {
						let goodsData = res.data.data;
						console.log(res.data)
						if (key == 'load') {
							this.goodsData = [...this.goodsData, ...goodsData];
							this.$refs.list.loadSuccess({
								list: this.goodsData,
								total: res.data.total
							});
						} else if (key == 'refresh') {
							this.goodsData = goodsData;
							this.$refs.list.refreshSuccess({
								list: this.goodsData,
								total: res.data.total
							});
						}
						this.$refs.list.showEmpty = false;
					}
				});
			},
			async loadData() {
				await uni.request({
					url: '/publics/advert/content',
					method: 'post',
					data: {
						position: 'accompany_index_slide'
					},
					success: res => {
						this.banner = res.data;
					}
				});
				await uni.request({
					url: '/addons/accompany/api.Category/lists',
					method: 'post',
					data: {
						type: 'accompany'
					},
					success: res => {
						this.menu = res.data
						uni.setStorageSync('wanlshop:accompanymenu', res.data);
					}
				});
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/medicalcare/accompany/list?keyword=${this.keyword}`, 'fade-in', 100);
			}
		}
	};
</script>


<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.wanlshop-container {
		background-repeat: no-repeat;
		
		&__head {
			color: #fff;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: transparent;
					height: 64rpx;
					border: 2rpx solid #fff;
					input {
						color: #fff;
					}
					.left {
						.icon {
							margin: 0 20rpx;
							color: #fff;
						}

						text {
							color: #fff;
							font-size: 28rpx;
						}
					}

					.btn {
						width: 146rpx;
						height: 60rpx;
						background: #57B966;
						border-radius: 30rpx;
						line-height: 60rpx;
						text-align: center;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
		}

	}


	.menu {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 690rpx;
		// height: 320rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 10rpx 0 20rpx 0;

		.item {
			width: 25%;
			margin-top: 20rpx;

			.image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 15rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			text {
				color: #000000;
				font-size: 24rpx;
			}
		}
	}

.product {
		margin: 0 30rpx;
		margin-top: 20rpx;
		.list {
			.item {
				border-radius: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				margin-bottom: 10rpx;
				position: relative;
				&::after {
					position: absolute;
					content: "";
					display: inline-block;
					width: 100%;
					height: 10rpx;
					background-color: #F6F6F6;
					bottom: -10rpx;
					left: 0;
				}
				.b {
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					// align-items: center;
					.tags {
						flex: 1;
						// display: flex;
						// justify-content: flex-start;
						// flex-wrap: wrap;
						text {
							display: inline-block;
							color: #333;
							border: 1px solid #ededed;
							padding: 4rpx 10rpx;
							border-radius: 4rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							font-size: 24rpx;
						}
					}
					.r {
						border: 1px solid #5CBBAD;
						width: 160rpx;
						height: 80rpx;
						background-color: rgba(92, 187, 173, 0.1);
						border-radius: 50rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
						text {
							font-size: 26rpx;
							color: #5CBBAD;
							font-weight: 500;
							margin-left: 4rpx;
						}
					}
				}
				.t {
					display: flex;
					justify-content: space-between;
					> image {
						width: 160rpx;
						height: 123rpx;
						border-radius: 10rpx;
					}
					.l {
						flex: 1;
						margin-right: 20rpx;
						.name {
							font-size: 30rpx;
							color: #000;
							font-weight: 800;
							line-height: 44rpx;
						}
						.tag {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: #333;
							flex-wrap: wrap;
							font-weight: 800;
							.city {
								// max-width: 340rpx;
								overflow: hidden;
								> text {
									display: inline-block;
									margin-right: 10rpx;
									margin-bottom: 6rpx;
								}
							}
							image {
								width: 30rpx;
								// height: 30rpx;
								margin-right: 5rpx;
							}
							.baozhang {
								flex-wrap: wrap;
								text {
									margin-right: 10rpx;
									margin-bottom: 6rpx;
								}
							}
						}
						.score {
							margin-top: 10rpx;
							width: 100%;
							> text {
								font-size: 26rpx;
								word-break: keep-all;
								color: #999;
								&:nth-child(3) {
									margin-left: 20rpx;
								}
								&:nth-child(2) {
									font-size: 28rpx;
									color: #f00;
									margin-left: 10rpx;
									font-weight: 500;
								}
							}
						}
						.comment {
							margin-top: 20rpx;
							box-sizing: border-box;
							.face {
								position: relative;
								image {
									position: absolute;
									top: 0;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
									
								}
							}
							.content {
								max-width: 260rpx;
								width: auto;
								color: #df7630;
								background-color: rgba(223, 118, 48, 0.1);
								font-size: 24rpx;
								padding: 4rpx 16rpx;
								border-radius: 2rpx;
							}
						}
					}
				}
			}
		}
	}
</style>